<template>
  <div class="boxjddp">
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="header">
          <h2>{{ $t("dataBoard.AdministratorScreen") }}</h2>
          <div class="leftimg"></div>
          <div class="rightimg"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="edata">
          <div style="text-align: center;">
            <div class="boxtitle">{{ $t("dataBoard.LoggingSystemType") }}</div>
          </div>
          <div style="height: calc(100% - 40px);">
            <div class="admintop">
                <div class="titnuls">
                  6
                </div>
                <div class="centnum">
                  ALS3系统
                </div>
            </div>
            <div class="adminbottom">
                <div class="titnulss">
                  10
                </div>
                <div class="centnums">
                  GN4系统
                </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="campback" style="width:100%;">
            <div class="maps">
              <div class="box2ss" >
                <div :class="parseInt(item)==0 || parseInt(item)>0 ? 'datebox' : 'dateboxs'" v-for="(item,index) in date">{{item}}</div>
              </div>
              <div class="box2ss">
                <div class="timebox" v-for="(item,index) in time">{{item}}</div>
              </div>
              <div style="height: calc(100% - 150px);text-align: center;margin-left: 20px;">
                <el-col :span="12" style="height: 100%;">
                  <div class="grid-content" style="height: 100%;">
                    <div @mouseenter="leftenter" @mouseleave="leftleave" :class="cenleft?'cenleft':'cenleft_hover'">
                      <div class="renshu">285人</div>
                      <div class="namer">{{ $t("dataBoard.NumberOfPeopleOnline") }}</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" style="height: 100%;">
                  <div class="grid-content" style="height: 100%;">
                      <div @mouseenter="rightenter" @mouseleave="rightleave" :class="cenright?'cenright':'cenright_hover'">
                        <div class="renshu">285人</div>
                        <div class="namers">{{ $t("dataBoard.Visits") }}</div>
                      </div>
                  </div>
                </el-col>
              </div>
            </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="edata">
          <div style="text-align: center;">
            <div class="boxtitle">{{ $t("dataBoard.TrafficRanking") }}</div>
          </div>
          <div style="height: calc(475px - 50px);padding: 10px;">
            <el-row class="rightrows">
              <el-col :span="2">
                <div class="grid-content rightnumboxs">
                  1
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content righttitles">
                  SZ36-1-A5
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content rightpros" style="width:70%">
                  
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple-light">
                  220
                </div>
              </el-col>
            </el-row>
            <el-row class="rightrows">
              <el-col :span="2">
                <div class="grid-content rightnumboxs">
                  2
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content righttitles">
                  SZ36-1-A5
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content rightprosl" style="width:60%">
                  
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple-light">
                  200
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="edata" style="padding-top:50px;">
          <el-table
            size="mini" 
            :data="tableData"
            style="width: 100%;height: calc(100% - 50px);">
            <el-table-column
              prop="id"
              label="ID"
              width="36">
            </el-table-column>
            <el-table-column
              prop="servename"
              :label="$t('servercon.serverName')">
            </el-table-column>
            <el-table-column
              prop="cpusyl"
              :label="$t('dataBoard.CPUUtilization')">
            </el-table-column>
            <el-table-column
              prop="ncsyl"
              :label="$t('dataBoard.MemoryUsage')">
            </el-table-column>
            <el-table-column
              prop="ypsyl"
              :label="$t('dataBoard.HardDiskUsage')">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="edata" style="padding-top:50px;">
            <el-table
            size="mini" 
            :data="tableData"
            style="width: 100%;height: calc(100% - 50px);overflow: auto;">
            <el-table-column
              prop="id"
              label="ID"
              width="36">
            </el-table-column>
            <el-table-column
              prop="servename"
              :label="$t('welllist.wellname')">
            </el-table-column>
            <el-table-column
              prop="ypsyl"
              :label="$t('platformcon.platformName')">
            </el-table-column>
            <el-table-column
              prop="ypsyl"
              :label="$t('dataBoard.MudLoggingSystem')">
            </el-table-column>
            <el-table-column
              prop="ypsyl"
              :label="$t('dataBoard.TransmissionModel')">
            </el-table-column>
            <el-table-column
              prop="ypsyl"
              :label="$t('dataBoard.serialNumber')">
            </el-table-column>
            <el-table-column
              prop="cpusyl"
              :label="$t('dataBoard.CPUUtilization')">
            </el-table-column>
            <el-table-column
              prop="ncsyl"
              :label="$t('dataBoard.MemoryUsage')">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="edata" style="padding-top:50px;">
          <el-table
            size="mini" 
            class="rizhitable"
            :data="rizhiData"
            style="width: 100%;height: calc(100% - 50px);overflow: auto;">
            <el-table-column
              prop="id"
              label="ID"
              width="36">
            </el-table-column>
            <el-table-column
              prop="name"
              :label="$t('userinfo.userName')">
              <template slot-scope="scope">
                <p class="namecss">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="cznr"
              :label="$t('dataBoard.OperationContent')">
               <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.cznr }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag class="slhcss" type="success" size="medium">{{ scope.row.cznr }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="time"
              :label="$t('wellsetlist.time')">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cenleft:true,
      cenright:true,
      tableData: [],
      rizhiData:[],
      date:"",
      time:"",
      intId:null,
    }
  },
  created () {
    setInterval(() =>{
      var d=new Date(),str=""; 
      str+=d.getFullYear()+'年'; //获取当前年份 
      str+=d.getMonth()+1+'月'; //获取当前月份（0——11） 
      str+=d.getDate()+'日'; 
      this.date=str;
      if(d.getHours()<=9){
        str="0"+d.getHours()+':';
      }else{
        str=d.getHours()+':';
      }
      if(d.getMinutes()<=9){
        str+="0"+d.getMinutes()+':';
      }else{
        str+=d.getMinutes()+':';
      }
      if(d.getSeconds()<=9){
        str+="0"+d.getSeconds();
      }else{
        str+=d.getSeconds();
      }
      this.time=str;
    }, 1000);

    let intId = setInterval(function(){
      let $this = document.getElementsByClassName("rizhitable")[0].getElementsByClassName("is-scrolling-none")[0].getElementsByClassName("el-table__body");
      let $parnt = document.getElementsByClassName("rizhitable");
      if($this[0].scrollHeight<=$parnt[0].scrollHeight){
        clearInterval(intId);
      }else{
        $(".rizhitable").find(".is-scrolling-none").find(".el-table__body").animate({
          marginTop: '-=1'
        },10,function(){
            var s = Math.abs(parseInt($this[0].style.marginTop));
            if(s >= $this[0].scrollHeight){
                $this[0].style.marginTop=0;
            }
        });
      }
    }, 100);
    setTimeout(function(){
      $(".rizhitable").find(".is-scrolling-none").find(".el-table__body").hover(function(){
        debugger;
        clearInterval(intId);
      },function(){
          intId = setInterval(function(){
          let $this = document.getElementsByClassName("rizhitable")[0].getElementsByClassName("is-scrolling-none")[0].getElementsByClassName("el-table__body");
          let $parnt = document.getElementsByClassName("rizhitable");
          if($this[0].scrollHeight<=$parnt[0].scrollHeight){
            clearInterval(intId);
          }else{
            $(".rizhitable").find(".is-scrolling-none").find(".el-table__body").animate({
              marginTop: '-=1'
            },10,function(){
                var s = Math.abs(parseInt($this[0].style.marginTop));
                if(s >= $this[0].scrollHeight){
                    $this[0].style.marginTop=0;
                }
            });
          }
        }, 100);
      });
    },1000)
  },
  methods: {
    leftenter: function(){
      this.cenleft = false;
    },
    leftleave: function(){
      this.cenleft = true;
    },
    rightenter: function(){
      this.cenright = false;
    },
    rightleave: function(){
      this.cenright = true;
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
  .header {
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: white;
  background-image: url("../../assets/show1.png");
  background-repeat: no-repeat;
  background-size: 100% 70px;

  .leftimg {
    float: left;
    width: 32%;
    height: 30%;
    background-image: url("../../assets/show2.png");
    background-repeat: no-repeat;
    background-size: 100% 15px;
  }
  .rightimg {
    float: right;
    width: 32%;
    height: 30%;
    background-image: url("../../assets/show3.png");
    background-repeat: no-repeat;
    background-size: 100% 15px;
  }
}
.edata {
  height: 475px;
  padding: 2px 10px 10px 10px;
  background-image: url("../../assets/border.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /deep/ table{
    width: 100% !important;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 0px !important;
    height: 0;
  }
}
.boxjddp{
  overflow: auto;
  height: 100%;
  overflow-x: hidden;
}
.boxjddp::-webkit-scrollbar{
    width:5px;
    height:5px;
}
.boxjddp::-webkit-scrollbar-track{
    background: #efefef00;
    border-radius:2px;
}
.boxjddp::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
}
.boxjddp::-webkit-scrollbar-thumb:hover{
    background: #b6dbf0;
}
.boxjddp::-webkit-scrollbar-corner{
    background: #ffffff;
}
.boxtitle{
  text-align: center;
  width: calc(100% - 60px);
  height: 40px;
  font-size: 20px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  margin-left: 28px;
  background-color: rgb(18, 37, 73);
  line-height: 40px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  letter-spacing: 2px;
}
.box2ss{
  text-align: center;
  width: calc(100% - 200px);
  height: 65px;
  font-size: 20px;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 10px;
}
.admintop{
  background-image: url("../../assets/admintop.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 40%;
  margin-top: 20px;
  position: relative;
}
.adminbottom{
  background-image: url("../../assets/adminbottom.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 40%;
  margin-top: 20px;
  position: relative;
}
.titnuls{
  position: absolute;
  top: 42%;
  left: 20%;
  font-size: 60px;
  color: #05F2E6;
}
.titnulss{
  position: absolute;
  top: 42%;
  left: 15%;
  font-size: 60px;
  color: #1587FC;
}
.centnum {
  position: absolute;
  top: 60%;
  right: 11%;
  font-size: 28px;
  color: #00FCF9;
}
.centnums {
  position: absolute;
  top: 60%;
  right: 11%;
  font-size: 28px;
  color: #ffffff;
}
.maps{
  background-image: url("../../assets/maps.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 475px;
  padding: 2px 10px 10px 10px;
}
.datebox{
  width: 51px;
  height: 63px;
  opacity: 1;
  font-size: 50px;
  background-color: #0A3153;
  line-height: 63px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
.timebox{
  width: 24px;
  height: 41px;
  opacity: 1;
  font-size: 35px;
  background-color: #0A3153;
  line-height: 41px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
.dateboxs{
  width: 51px;
  height: 63px;
  opacity: 1;
  font-size: 35px;
  background-color: #0A3153;
  line-height: 63px;
  color: #0062FF;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
.cenleft{
  background-image: url("../../assets/current_visit_bluebg.png");
  background-repeat: no-repeat;
  background-size: 100% 73%;
  margin-top: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.cenleft_hover{
  background-image: url("../../assets/current_visit_bluebg.gif");
  background-repeat: no-repeat;
  background-size: 100% 73%;
  margin-top: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.cenright{
  background-image: url("../../assets/current_visit_purplebg.png");
  background-repeat: no-repeat;
  background-size: 100% 73%;
  margin-top: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.cenright_hover{
  background-image: url("../../assets/current_visit_purplebg.gif");
  background-repeat: no-repeat;
  background-size: 100% 73%;
  margin-top: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.renshu{
  width: auto;
  position: absolute;
  top: 32%;
  left: 20%;
  font-size: 21px;
}
.namer{
  width: auto;
  position: absolute;
  top: 3%;
  right: 7%;
  font-size: 21px;
  color: #26E6FF;
}
.namers{
  width: auto;
  position: absolute;
  top: 3%;
  right: 9%;
  font-size: 21px;
  color: #B07CF5;
}
.rightnumboxs{
  background-color: #333D99;
}
.righttitles{
  color: #28E7E6;
}
.rightrows{
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.rightpros{
  border-radius: 15px;
  margin-top:3px;
  height: 22px;
  border: 1px solid #0AD0A6;
  background-image: linear-gradient(to right, #0AB376 , #5AF8BF);
}
.rightprosl{
  border-radius: 15px;
  margin-top:3px;
  height: 22px;
  border: 1px solid #0E8AE8;
  background-image: linear-gradient(to right, #1D31B2 , #31A9DF);
}
.slhcss{
  text-overflow : ellipsis;
  width:100%;
  overflow: hidden;
  background-color: inherit;
  border:0px;
}
.namecss{
  color: #8C70BC;
}
</style>